<template>
	<div class="style_detail">
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/customer' }">homepage</el-breadcrumb-item>
		  	<el-breadcrumb-item>Add RFQ</el-breadcrumb-item>
		</el-breadcrumb>
		 
		<el-form ref="goodsForm" :model="goodsForm" :rules="rules" label-width="160px" >
		 <el-row class="good_detail">
			 			 
			 <div class="canEdit">
			 	<el-form-item label="Contact" prop="ContactID">
			 		<el-col :span="4">
					   <el-select v-model="goodsForm.ContactID" placeholder="Please choose"   filterable clearable>
							  <el-option v-for="(item, index) in ContactList" :key="index" :label="item.ContactName" :value="item.CompanyContactID"></el-option>
					    </el-select>
				    </el-col> 
				    
				    <el-checkbox v-model="goodsForm.Hot" style="margin-left:85px;">Hot</el-checkbox>
				 </el-form-item>
				 
				 <el-form-item label="RequestDate" >
			 		<el-date-picker
				      v-model="goodsForm.RequestDate"
				      type="date"
				      format="yyyy-MM-dd"
				      placeholder="Select date">
				    </el-date-picker>
				    
				     <el-checkbox v-model="goodsForm.OpenPO" style="margin-left:28px;">OpenPO</el-checkbox>
				 </el-form-item>
				 
				<el-form-item label="SalesRep" prop="SalesRepID">
			 		<el-col :span="11">
					   <el-select v-model="goodsForm.SalesRepID" placeholder="Please choose" filterable clearable>
							  <el-option v-for="(item, index) in SalesRepList" :key="index" :label="item.employeeName" :value="item.employeeID"></el-option>
					    </el-select>
				    </el-col> 
				 </el-form-item> 
				 
				 <el-form-item label="Part" required>
			 		<el-col :span="5.3">
			 		   <el-form-item  prop="BrandID">
						   <el-select v-model="goodsForm.BrandID" filterable clearable placeholder="Please choose"  filterable clearable>
								  <el-option v-for="(item, index) in BrandList" :key="index" :label="item.BrandName" :value="item.BrandID"></el-option>
						    </el-select>
					    </el-form-item>
					</el-col> 
					
					<el-col :span="15">
					 	<el-form-item prop="PartNo">  
						     <el-input v-model="goodsForm.PartNo"  prop="PartNo" style="clear: left;display:inline;"></el-input>
						     <el-button type="primary" icon="el-icon-search" @click="searchPart">Search</el-button>
					     </el-form-item>
				    </el-col> 
				 </el-form-item>
				 
				 <el-form-item label="CustomerPartNo">
				   <el-input v-model="goodsForm.CustomerPartNo"  ></el-input>
				 </el-form-item>
				 <el-form-item label="TargetPrice" class="item-detail">
				   <el-input v-model="goodsForm.TargetPrice" ></el-input>
				 </el-form-item>
				  <el-form-item label="Quantity" class="item-detail"  prop="Quantity">
				   <el-input v-model.number="goodsForm.Quantity" autocomplete="off"></el-input>
				 </el-form-item>
				 <el-form-item label="DateCode" class="item-detail" style="clear: left;">
				   <el-input v-model="goodsForm.DateCode"  ></el-input>
				 </el-form-item>
				 <el-form-item label="Package"  class="item-detail" >
				   <el-input v-model="goodsForm.Package"  ></el-input>
				 </el-form-item>
				
				<el-form-item label="LeadFree" style="clear: left;">
			 		<el-col :span="11">
					   <el-select v-model="goodsForm.LeadFree" placeholder="Please choose" >
							 <!-- <el-option v-for="(item, index) in LeadFreeList" :key="index" :label="item.CountryName" :value="item.CountryID"></el-option>-->
					          <el-option label="Any" :value="1"></el-option>
					          <el-option label="LeadFree" :value="2"></el-option>
					          <el-option label="Leaded" :value="3"></el-option>
					          <el-option label="RoHScompliant" :value="4"></el-option>
					          <el-option label="RoHScompliantAndHalo" :value="5"></el-option>  
					          </el-select>
					    </el-select>
				    </el-col> 
				 </el-form-item>
				
				 <el-form-item label="Remarks" >
				    <el-input type="textarea"  :autosize="{ minRows: 2, maxRows: 4}" v-model="goodsForm.Remarks"></el-input>
				 </el-form-item>
			 </div>
			  
		  </el-row>
		  
		  <el-form-item class="submit">
		    <el-button type="primary"  @click="submitForm('goodsForm')">Save</el-button>
		    <el-button >Cancel</el-button>
		  </el-form-item>
		</el-form>	
	
	<!-- jkjkjkjk-->
			<el-dialog  title ="Search Part" :visible.sync="dialogTableVisible" customClass="customWidth_50">
				<el-input v-model="partName" placeholder="Search Part Name" style="width:32%;" clearable></el-input>
				
				<el-button type="primary" icon="el-icon-search" @click="partNameSearch">Search</el-button>
				<el-button type="primary" icon="el-icon-tickets" @click="AddPart">Add Part</el-button>
				
				
			  <el-table :data="tablePartList" style="margin-top:1px;"> 
			   <!-- <el-table-column property="PartNo" label="PartNo" width="220"  @click="openHome(scope.row)"></el-table-column> -->
			   <el-table-column label="PartNo"  align="center" >
				   <template slot-scope="scope" >
						<span @click="openHome(scope.row)" style="cursor:pointer">{{ scope.row.PartNo }}</span>
				    </template>
			   </el-table-column>
			   
				<el-table-column property="BrandAlias" label="Brand Alias" width="200" ></el-table-column>
				<el-table-column property="PartDesc" label="Part Desc" width="150" ></el-table-column>
			  </el-table>
			</el-dialog>
			
			<!--  ADD Part  -->
			<el-dialog title="Add New Part" :visible.sync="dialogAddPart">
					  <el-form :model="ruleForm" :rules="rulesPart" ref="ruleForm" >
					     <el-form-item label="PartNo" prop="PartNo" >
						   <el-input v-model="ruleForm.PartNo"  placeholder="PartNo"></el-input>
						 </el-form-item>
						 <el-form-item label="PartDesc" prop="PartDesc">
						   <el-input v-model="ruleForm.PartDesc"  placeholder="PartDesc"></el-input>
						 </el-form-item>
						 
						 <el-form-item label="Brand" prop="BrandID">
						 	<el-select v-model="ruleForm.BrandID" filterable placeholder="请选择">
								  <el-option v-for="(item, index) in BrandList" :key="index" :label="item.BrandName" :value="item.BrandID"></el-option>
						    </el-select>
						 </el-form-item>
						 
						 <el-form-item label="PartType" prop="PartTypeID">
						 	<el-select v-model="ruleForm.PartTypeID" filterable placeholder="请选择">
								  <el-option v-for="(item, index) in PartTypeList" :key="index" :label="item.PartTypeName" :value="item.PartTypeID"></el-option>
						    </el-select>
						 </el-form-item>
					    
					  </el-form>
					  <div slot="footer" class="dialog-footer">
					    <el-button @click="dialogAddPart = false">Cancel</el-button>
					    <el-button type="primary" @click="AddPartsubmitForm('ruleForm')">Save</el-button>
					  </div>
				</el-dialog>
		  
	</div>
</template>

<script type="text/javascript">
	import E from 'wangeditor'
	import 'wangeditor/release/wangEditor.min.css'
	export default{
		data(){
			var checkNums = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('Quantity  cannot be empty'));
		        }
			
			};
			
			return{
				max:20,
				goodsForm:{
					ContactID:'',
					RequestDate:'',
					SalesRepID:'',
					PartID:'',
				    PartNo:'',
					CustomerPartNo:'',
					TargetPrice:0,
					Quantity:'',
					DateCode:'',
					Package:'',
					LeadFree: 1,
					Remarks:'',
					Hot:false,
					OpenPO:false,
					BrandID:'',
					param:[],
				},
				ruleForm:{
					PartNo: '',
					PartDesc:'',
					PartTypeID:'',
					BrandID:'',
					NonStockPart:0,
					isPBF:0,
					isROHSOK:0,
					
				},
				CompanyID: '',
				dialogImageUrl: '',
				dialogVisible: false,
				currentdata:[],
				LeadFreeList:[],
				SalesRepList:[],
				PartList:[],
				BrandList:[],
				ContactList:[],
				tablePartList:[],
				dialogTableVisible : false, 
				dialogAddPart : false, 
				PartTypeList:[],
				partName:'',
				rules: {
					 ContactID: [
				            { required: true, message: 'Please choose Contact', trigger: 'change' }
				          ], 
				     SalesRepID:[
				     		{ required: true, message: 'Please choose SalesRep', trigger: 'change' }
				     		],     
				     BrandID: [
				            { required: true, message: 'Please choose Brand', trigger: 'change' }
				          ],
			         PartNo: [
				            { required: true, message: 'Please input PartNo', trigger: 'blur' },
							{ min: 2, max: 500, message: '2 to 500 characters in length', trigger: 'blur' }
				          ],   
				     Quantity:[
        			  		{  required: true, message: ' Cannot be empty' },
        			  		{  type: 'number', message: 'Must be a numeric value' },
        			 	  ],
        			  },
        		rulesPart:{
        			PartNo: [
				            { required: true, message: 'Please input PartNo', trigger: 'blur' },
							{ min: 2, max: 500, message: '2 to 500 characters in length', trigger: 'blur' }
				          ],  
        			 BrandID: [
				            { required: true, message: 'Please choose Brand', trigger: 'change' }
				          ],
        			PartTypeID: [
				            { required: true, message: 'Please choose PartType', trigger: 'change' }
				          ],
        		
        		},
			}
		},
		mounted () {


	    },
		created(){
			this.getContactList();
			this.getBrandList();
			//this.getPartList();
			this.getSalesRepList();
			this.getPartType();
			this.goodsForm.RequestDate =this.getNowFormatDate();
			this.CompanyID =this.$route.query.CompanyID; 
			this.CustomerID =this.$route.query.CustomerID;
		},
		methods:{
			 submitForm(formName) {
		        this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	axios.post('/api/customer/rfqadd',{
		          		pagram:this.goodsForm,
						CompanyID:this.CompanyID,
		         	 	CustomerID:this.CustomerID
		          	
		          	})
					.then(result => {
						if (result.data.code == 200) {
						this.$notify.success({
							title: 'Success',
							message: result.data.message
						});
						setTimeout(() => {	
									this.$router.go(-1)
									 // this.$router.push({ path: '/api/style/detail?dd='+JSON.stringify(this.currentRow)})
								},1000);
						
							} else {
								this.$notify.error({
									title: 'Fail',
									message: result.data.message
								});
							}
								
							})
					.catch(error => {
						
					})
		          } else {
		            console.log('error submit!!');
		            return false;
		          }
		        });
		      },
		  AddPartsubmitForm(formName){
		  		this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	axios.post('/api/customer/partadd',{
		          		param:this.ruleForm,
		          	
		          	})
					.then(result => {
						if (result.data.code == 200) {
						this.$notify.success({
							title: 'Success',
							message: result.data.message
						});
						this.dialogAddPart=false;
						
							} else {
								this.$notify.error({
									title: 'Fail',
									message: result.data.message
								});
							}
								
							})
					.catch(error => {
						
					})
		          } else {
		            console.log('error submit!!');
		            return false;
		          }
		        });
		  
		  
		  },	
	      getContactList(){
	      var CompanyID =this.$route.query.CompanyID; 
	      	axios.get('/api/companycontact?CompanyID='+CompanyID).then(result => {
					this.ContactList = result.data.result;
				});
	      },
	      getSalesRepList(){
	      		axios.get('/api/getsalesRep').then(result => {
					this.SalesRepList = result.data.result;
				});
	      },
	      
	      getBrandList(){
	      	//var BrandAlias =this.goodsForm.Part; 
	      	axios.get('/api/brand').then(result => {
					this.BrandList = result.data.result;
				});
	      },
	    getPartList(){
	    	//BrandAlias--------------
	    	axios.get('/api/part?PartNo=ADL').then(result => {
					this.PartList = result.data.result;
				});
	    
	    },  
	    openHome(row){
	        this.dialogTableVisible =false;
	        this.goodsForm.PartNo = row.PartNo;
	        this.goodsForm.PartID = row.PartID;
	        this.goodsForm.param = row;
	        
	    },
	    getPartType(){
			axios.get('/api/parttype').then(result => {
				this.PartTypeList = result.data.result;
			});
		
		},	
		getNowFormatDate() {
			    var date = new Date();
			    var seperator1 = "-";
			    var year = date.getFullYear();
			    var month = date.getMonth() + 1;
			    var strDate = date.getDate();
			    if (month >= 1 && month <= 9) {
			        month = "0" + month;
			    }
			    if (strDate >= 0 && strDate <= 9) {
			        strDate = "0" + strDate;
			    }
			    var currentdate = year + seperator1 + month + seperator1 + strDate;
			    return currentdate;
			},
		searchPart(){
			if(this.goodsForm.BrandID == ''){
				return this.$message.error('Please choose Brand');
			}
			
			this.dialogTableVisible=true;
		},
		partNameSearch(){
			axios.get('/api/part?PartNo='+this.partName +'&BrandID='+this.goodsForm.BrandID).then(result => {
					this.tablePartList = result.data.result;
				});
		},
		
		AddPart(){
			this.dialogAddPart=true;
		},
		
		
		handleRemove(file, fileList) {
			axios.post('/api/base/delImage',file)
					.then(result => {
						this.img_url_1 = fileList;
					})
					.catch(error => {
					});
		},
		handlePreview(file) {
			//console.log(this.goodsForm.detailPic);
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		},
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`);
		},
		successEvent(file){
		    	this.img_url_1.push({name:file.result,url:file.result});
		    },
		handleClose(obj) {
			this.dialogVisible = false;
		},
		filterMethod(query, item) {
			return item;
		}
			
		}
	}
</script>

<style lang="scss" >
	.style_detail{
		input[type=file] {
		    display: none;
		}
		.submit{
			margin-top: 30px;
		}
		.good_detail{
			.time1{
				width: 100%;
				clear: left;
				.demonstration{
					display: inline-block;
					width: 86px;
					text-align: right;
					padding-right: 8px;
					font-size: 14px;
					font-weight: 600;
					color: #606266;
				}
			}
			.detailReadOnly{
				float: left;
				overflow: hidden;
				    margin-bottom: 15px;
				.item-detail{
					margin-top: 10px;
					margin-bottom: 10px;
				}
				.underline{
					.el-input__inner{
						border: 0;
						border-bottom: 1px solid #DCDFE6;
						border-radius: 0;
					}
				}
			}
			.canEdit{
				float: left;
				width: 100%;
				margin-top: 25px;
				.el-input__inner{
					width: 160px;
				}	
				.item-detail{
					float: left
				}
			}
		}
		.image{
			
			border: 1px solid #f2f2f2;
			border-radius: 6px;
			overflow: hidden;
		}
		.itembox{
			box-shadow: none;
			border: none;
		}
		.imgwrap{
			position: relative;
			display: inline-block;
			margin-right: 10px;
		}
		.imgwrap:last-child{margin-right: 0;}
		.del{
			position: absolute;
			right: 6px;
			top: 6px;
			display: none;
		}
		.del:hover{cursor: pointer;}
		.imgwrap:hover .del{display: block;}
		
		.el-upload-list--picture-card .el-upload-list__item{
			width: 200px;
			height: 200px;
		}
		.el-upload--picture-card{
			width: 200px;
			height: 200px;
			line-height: 200px;
		}
	}
	
</style>